<!DOCTYPE html>

<head lang="en-US">
  <meta charset="utf-8">
  <title>
    vue guide samples
  </title>
  <link href="./index.css" rel="stylesheet" type="text/css" />
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="app">
    <!--   v-model实时更新   -->
    <!-- {{bar}}
    <custom-events-model v-model:foo.capitalize="bar"></custom-events-model> -->

    <!-- 动态组件 -->
    <div id="dynamic-component-demo" class="demo">
      <button v-for="tab in tabs" :key="tab" :class="['tab-button', { active: currentTab === tab }]"
        @click="currentTab = tab">
        {{ tab }}
      </button>

      <keep-alive>
        <component :is="currentTabComponent" class="tab"></component>
      </keep-alive>
    </div>
  </div>
  <script type="module" src="./index.js"></script>
</body>

</html>